<template>
	<Esign
		ref="esignRef"
		v-bind="$attrs"
		:width="width"
		:height="height"
		:isCrop="isCrop"
		:lineWidth="lineWidth"
		:lineColor="lineColor"
		:bgColor="bgColor"
	></Esign>
</template>

<script setup lang="ts" name="Esign">
import Esign from './components/esign.vue'
import { ref } from 'vue'

// 默认值
withDefaults(
	defineProps<{
		width?: number // 画布宽度，即导出图片的宽度
		height?: number // 画布高度，即导出图片的高度
		lineWidth?: number // 画笔粗细
		lineColor?: string // 画笔颜色
		bgColor?: string // 	画布背景色，为空时画布背景透明，支持多种格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red'
		isCrop?: boolean // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
		isClearBgColor?: boolean // 清空画布时(reset)是否同时清空设置的背景色(bgColor)
		format?: string // 生成图片格式 image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)、 image/webp
		quality?: number // 生成图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略
	}>(),
	{
		width: 800,
		height: 300,
		lineWidth: 4,
		lineColor: '#000000',
		isCrop: false,
		isClearBgColor: false,
		format: 'image/png',
		quality: 1
	}
)

const esignRef = ref()
function reset() {
	return esignRef.value.reset(...arguments)
}
function generate() {
	return esignRef.value.generate(...arguments)
}
defineExpose({ reset, generate })
</script>
<style scoped lang="scss"></style>
